import React, {useEffect, useState } from "react";
import {useLocation, useNavigate } from "react-router-dom";
import axios from "axios";
import moment from 'moment';
import {Descriptions, PageHeader} from 'antd';


const AuditStateMap = {
    "0": "未审核",  // 草稿箱
    "1": "待审核",
    "2": "审核通过",
    "3": "审核不通过"
};
const PublishStateMap = ["待发布", "已发布", "已下线"];
const colorList= ['black', 'orange', '#1890ff', 'red'];

export default function NewsPreview() {
    const [newsData, setNewsData]= useState({});
    const location= useLocation();
    const navigate= useNavigate();
    const id= location.pathname.split('/')[3];
    useEffect(()=>{
        axios.get(`/api/news/${id}?_expand=category&_expand=role`).then(response=>{
            // console.log(response.data);
            setNewsData(response.data);
        });
    }, [id]);


    return (
        <div>
            <PageHeader
                onBack={() => navigate(-1)}
                title={newsData.title}
                subTitle={newsData.category?.title}
            >
                <Descriptions size="small" column={3}>
                    <Descriptions.Item label="创建者">{newsData.author}</Descriptions.Item>
                    <Descriptions.Item label="创建时间">{newsData.createTime ? moment(newsData.createTime).format('YYYY-MM-DD HH:mm:ss') : '-'}</Descriptions.Item>
                    <Descriptions.Item label="发布时间">{newsData.publishTime ? moment(newsData.publishTime).format('YYYY-MM-DD HH:mm:ss') : '-'}</Descriptions.Item>
                    <Descriptions.Item label="区域">{newsData.region}</Descriptions.Item>
                    <Descriptions.Item label="审核状态"><span style={{color: colorList[newsData.auditState]}}>{AuditStateMap[newsData.auditState]}</span></Descriptions.Item>
                    <Descriptions.Item label="发布状态"><span style={{color: colorList[newsData.auditState]}}>{PublishStateMap[newsData.publishState]}</span></Descriptions.Item>
                    <Descriptions.Item label="访问数量">{newsData.view}</Descriptions.Item>
                    <Descriptions.Item label="点赞数量">{newsData.star}</Descriptions.Item>
                    <Descriptions.Item label="评论数量">{newsData.comment || 0}</Descriptions.Item>
                </Descriptions>
            </PageHeader>

            <div dangerouslySetInnerHTML={{__html:newsData.content}} style={{padding:'10px 24px', border: '1px dashed gray', minHeight: '200px'}}></div>
        </div>
    )
}
